<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`商品类型`">
					<el-select
						v-model="queryData.goodsTypeList"
						clearable
						:placeholder="`${$t('common.select_all')}`"
						style="width:220px"
						multiple
					>
						<el-option
							v-for="item in productTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`商品名称`">
					<el-input
						v-model.trim="queryData.goodsName"
						v-input="{ name: 'symbols' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870117')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<div class="table-title">
				请拖拽数据行排序
			</div>
			<el-table
				ref="dragTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					:label="`排序序号`"
					min-width="90"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.sortNum }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品类型`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.goodsTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="商品编号"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.goodsCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品名称`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.goodsName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`商品状态`"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.statusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`创建人`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="最后操作时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`最后操作人`"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
			</el-table>
		</template>
	</main-content>
</template>

<script>
import Sortable from 'sortablejs'
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
import { productStatusArr } from '@/views/dxn/shopManager/components/constants'

export default {
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			loading: false,
			list: [],
			pageSize: 200,
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: ['wrap'],
			queryData: {
				goodsName: '',
				goodsTypeList: []
			},
			productStatusArr,
			productTypeArr: []
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initSortTable()
		})
	},
	created() {
		this.getProductTypeArr()
	},
	methods: {
		// 获取商品类型配置
		getProductTypeArr() {
			this.productTypeArr = []
			this.$api
				.getBackendEnumListBend({ code: 1001 })
				.then((res) => {
					this.productTypeArr = res?.data || []
				})
				.catch(() => {})
		},
		initSortTable() {
			const tbody = document.querySelector(
				'.el-table__body-wrapper tbody'
			)
			const that = this
			Sortable.create(tbody, {
				animation: 150,
				onEnd({ oldIndex, newIndex }) {
					if (oldIndex === newIndex) {
						return
					}
					const newList = [...that.list]
					const dragRow = newList.splice(oldIndex, 1)[0]
					if (dragRow.id === undefined) {
						return
					}
					newList.splice(newIndex, 0, dragRow)
					// 处理新的排序列表
					const newSortList = newList
						.filter((item) => item.goodsType === dragRow.goodsType)
						.map((item, index) => {
							return {
								id: item.id,
								sort: index + 1
							}
						})

					// 获取旧的排序列表
					const oldSortArr = that.list
						.filter((item) => item.goodsType === dragRow.goodsType)
						.map((item) => item.id + '-' + item.sortNum)

					// 去除没有改变的id
					const updateSortList = newSortList.filter(
						(item) =>
							!oldSortArr.includes(item.id + '-' + item.sort)
					)

					that.$api
						.setMallProductSortBend({ list: updateSortList })
						.then((res) => {
							that.loadData()
						})
						.catch(() => {})
				}
			})
		},
		getCurrentParams() {
			const params = {
				...this.queryData
			}
			if (!params.goodsTypeList?.length) {
				params.goodsTypeList = undefined
			}
			params.sort = true
			return params
		},
		loadData() {
			const params = this.getParams(this.getCurrentParams())
			this.loading = true
			this.list = []
			this.$api
				.getMallProductListBend(params)
				.then((res) => {
					this.loading = false
					const { record = [], totalRecord } = res.data || {}
					this.list = record || []
					this.total = totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSearch() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			Object.keys(this.queryData).forEach((key) => {
				if (Array.isArray(this.queryData[key])) {
					this.queryData[key] = []
				} else {
					this.queryData[key] = undefined
				}
			})
			this.pageNum = 1
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getCurrentParams())
			params.pageSize = undefined
			params.pageNum = undefined
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportMallProductListBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>
<style lang="scss" scoped>
.game-container {
	margin: 0px 16px 50px 16px;
}
.text-click {
	color: #409eff;
	cursor: pointer;
}
.table-title {
	color: red;
	font-size: 13px;
	margin-bottom: 5px;
}
::v-deep .el-table .cell .el-tooltip {
	cursor: pointer;
}
</style>
